<template>
<el-dialog :title="title" @close="dialogClose" :visible="visible">
<el-form :model="stuForm" :rules="stuRules" ref="stuDialogRuleForm">

    <!-- 添加头像 -->
    <el-form-item label="头像">
        <el-upload class="uploadAvatar" ref="uploadAvatar" action="/api/students/uploadStuAvatar"
        list-type="picture-card" :on-success="uploadSuccess" :on-remove="removeAvatar" :limit="1"
        name="headimgurl" :multiple="false">
        <i class="el-icon-plus"></i>
        </el-upload>
    </el-form-item>
    
    <el-form-item label="名字" prop="name">
    <el-input v-model=" stuForm.name"></el-input>
    </el-form-item>
    <el-form-item label="项目地址" prop="productUrl">
    <el-input v-model=" stuForm.productUrl"></el-input>
    </el-form-item>
    <el-form-item label="班级" prop="class">
    <el-input v-model=" stuForm.class"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
    <el-input v-model=" stuForm.age"></el-input>
    </el-form-item>
    <el-form-item label="城市" prop="city">
    <el-input v-model=" stuForm.city"></el-input>
    </el-form-item>
    <el-form-item label="学历" prop="degree">
    <el-input v-model=" stuForm.degree"></el-input>
    </el-form-item>
    <el-form-item label="描述" prop="description">
    <el-input v-model=" stuForm.description"></el-input>
    </el-form-item>

</el-form>

    <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('cancel')">取 消</el-button>
        <el-button type="primary" @click="confirm('stuDialogRuleForm')">确 定</el-button>
    </div>

</el-dialog>
</template>

<script>
export default {
    props:{
        visible:{
            type:Boolean,
            default(){
                return false
            }
        }
    },
    data(){
        return{
          
            title: "增加学员信息",
            
            stuForm: {
                name: '',
                productUrl: '',
                headimgurl: '',
                class: '',
                age: '',
                city: '',
                degree: '',
                description: ''
            },
             stuRules: {
                name: [
                    { required: true, message: '请输入名字', trigger: 'blur' }
                ],
                class: [
                    { required: true, message: '请输入班级', trigger: 'blur' }
                ],
                degree: [
                    { required: true, message: '请输入学历', trigger: 'blur' }
                ],
                city: [
                    { required: true, message: '请输入城市', trigger: 'blur' }
                ],
                productUrl: [
                    { required: true, message: '请输入项目地址', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入描述', trigger: 'blur' }
                ]
            },
        }
    },
  methods: {
    /* touxiang */
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    dialogClose(){
        this.$emit("cancel")
    },
    removeAvatar(){

    },
    uploadSuccess(r){//图片上传成功的回调
        if(r.state){
            this.stuForm.headimgurl=r.headimgurl
        }else{
            this.$message.error(r.msg+"-"+r.err)
        }
    },
    // 点击确定按钮
    confirm(formInfo){
        // 表单本地校验
        this.$refs[formInfo].validate(valid=>{
            if(valid){//校验通过关闭窗口   并将数据传输过去
                this.$emit("ok",this.stuForm)
            }
        })
    }



  },
};
</script>

<style scoped lang="less">
.from {
  border: 1px solid black;
  background-color: #fff;
}
/* 头像 */
.avatar-uploader .el-upload {
border: 3px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader-icon{
border:2px dashed #409EFF;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
